<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>03数据绑定</title>
        <script type="text/javascript" src="../js/vue.js"></script>
        <!-- shortcut icon”这样做的结果是所有浏览器都可以理解此代码。只有当希望为新浏览器提供另一种备用图像,才有必要添加第二行使用icon -->
        <link rel ="shortcut icon" type="image/x-icon" href="../static/vue.jpg">
    </head>

    <body>
        <div id="root"><!-- 准备好一个容器root -->
            <!-- 普通写法 -->
            单向数据绑定：<input type="text" v-bind:value="name"><br/> <!-- v-bind属于单向绑定，控制台可以影响页面，页面不能影响控制台 -->
            双向数据绑定：<input type="text" v-model:value="name"><br/> <!-- v-model属于双向绑定，控制台可以影响页面，页面也可以影响控制台 -->

            <!-- 简写 -->
            单向数据绑定：<input type="text" :value="key"><br/> <!-- v-bind属于单向绑定，控制台可以影响页面，页面不能影响控制台 -->
            双向数据绑定：<input type="text" v-model="key"><br/>
            
            <!-- 如下代码是错误的，因为v-model只能应用在表单类元素上，不能修改 -->
            <h2 v-model:x="name">Hello Vue</h2>
        </div>
    </body>

    <script type="text/javascript">
        Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
    
        new Vue({
            el:'#root',
            data:{
                name:'枫秋落叶',
                key:'Java',
            }
        })
    </script>
</html>